<template>
    <div>
        <el-table :data="tableData">
            <el-table-column label="模板编号" prop="templateId"></el-table-column>
            <!-- <el-table-column label="项目名称" prop="xqName"></el-table-column> -->
            <el-table-column label="收费项名称" prop="fullCostItemName"></el-table-column>
            <el-table-column label="收费标准名称" prop="name"></el-table-column>
            <el-table-column label="计算方式" prop="overdueFeeCalculationMethod">
                <!-- 1-固定金额 2-固定系数 -->
                <template slot-scope="scope">
                    <div>
                        {{scope.row.overdueFeeCalculationMethod==1?'固定金额':scope.row.overdueFeeCalculationMethod==2?'固定系数':''}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="单价" prop="unitPrice"></el-table-column>
            <el-table-column label="数量" prop="num"></el-table-column>
            <el-table-column label="缴费类型" prop="calculationCycle">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.calculationCycle==1?'周期性计费':scope.row.calculationCycle==2?'单次计费':''}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="周期" prop="">
            </el-table-column>
            <el-table-column label="生效时间" prop="validityStart" width="150">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.validityStart | format}}
                    </div>
                </template>
            </el-table-column>
            <!-- <el-table-column label="是否银行划账" prop="remitAccount">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.remitAccount?'是':'否'}}
                    </div>
                </template>
            </el-table-column> -->
            <el-table-column show-overflow-tooltip="" label="备注" prop="remark"></el-table-column>
            <el-table-column label="操作" prop="" width="250">
                <template slot-scope="scope">
                    <div>
                        <el-button size="small" type="warning" @click="updateObj(scope.row)">修改</el-button>
                        <el-button size="small" type="danger" @click="delOnly(scope.row.id)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <configTemp ref="configTemp" :updObj="updObj" :addOrUpd="addOrUpd" :dialogVisible="dialogVisible"
        :disable="disable" @dialogFlag="dialogFlag" @operateType="operateType"
        ></configTemp>
         <!-- <m-dialog :dialogVisible="dialogVisible" :updObj="updObj" :addOrUpd="addOrUpd" @operateType="operateType"
            @dialogFlag="dialogFlag"></m-dialog> -->

    </div>
</template>

<script>
import configTemp from './template_config.vue';
import {getDateArray} from '../../util/util.js'
import { houseBindDel, houseBindUpdate, houseBindDetail} from '../../url/api';
export default {
    props: ['houseId'],
    data() {
        return {
            tableData:[],
            dialogVisible: false,
            updObj: {},
            addOrUpd:null,
            disable:false
        };
    },
    methods: {
        updateObj(obj){
            // //console.log('aaaaaaa');
            this.addOrUpd = 4
            this.updObj = [];
            this.updObj = obj;
            let configTemp = this.$refs['configTemp'];
            if (configTemp) {
              configTemp.clearValidate();
            }
            this.dialogVisible = true
        },
        delOnly(id) {
            houseBindDel([id]).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: '删除成功！',
                        type: 'success',
                    });
                    this.$emit('delSuccess',true)
                    // this.getlist();
                }else{
                    this.$emit('delSuccess',false)
                }
            });
        },
        operateType(val){
            this.dialogVisible = false;
        },
        dialogFlag(obj){
            //console.log(obj);
            this.dialogVisible = obj.dialog
            let  houseId = this.houseId;
            houseBindDetail(houseId).then((res) => {
                if(res.data.code == 200){
                    //console.log(res.data.data);
                    this.tableData = res.data.data;
                    // this.bindTempDetailDialog = true;
                }
            });

        },
        getData() {
          houseBindDetail(this.houseId).then((res) => {
            if (res.data.code === 200) {
              //console.log(res.data.data);
              this.tableData = res.data.data;
              // this.bindTempDetailDialog = true;
            }
          });
        }
    },
    created() {
      this.getData();
    },
  // updated(){
    //     let  houseId = this.houseId;
    //         houseBindDetail(houseId).then((res) => {
    //             if(res.data.code == 200){
    //                 //console.log(res.data.data);
    //                 this.tableData = res.data.data;
    //                 // this.bindTempDetailDialog = true;
    //             }
    //         });
    // },
    components: {configTemp},
    filters:{
        format(ts){
            return getDateArray(ts)[9];
        }
    }
};
</script>

<style>
</style>
